<template>
  <div style="display: flex; line-height: 60px; width: 100%;"> <!-- 添加 width: 100% 确保占满父容器 -->
    <div style="display: flex;font-size: 24px;align-items: center"> <!-- 保持折叠图标单独一行或根据需要调整 -->
      <i :class="icon" @click="collapse"></i>
    </div>
    <div style="flex: 1; text-align: center;font-size: 20px"> <!-- 添加 text-align: center 使文字居中 -->
      <span>仓库管理系统</span>
    </div>
    <div>
      <el-dropdown>
        <span>{{ user ? user.name : '未登录' }}</span> <!-- 显示用户名或未登录 -->
        <i class="el-icon-arrow-down" style="margin-left: 5px; margin-right: 15px"></i> <!-- 调整箭头位置 -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("CurUser"))
    };
  },
  methods: {
    toUser() {
this.$router.push("/HomePage")
    },
    logout() {
      this.$router.push("/")
      sessionStorage.removeItem("CurUser");
      this.user = null; // 清除用户数据
    },
    collapse() {
      this.$emit('doCollapse');
    },


  },
  props: {
    icon: String,
  }
};
</script>

<style scoped>
/* 你可以在这里添加额外的样式 */
</style>
